<template>
    <el-dialog title="创建定时消息" :visible.sync="dialogTableVisible" :show-close="false" :center="true" top="20vh" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="inpVue">
                <div class="label">请选择发送方的微信</div>
                <el-select v-model="currentWeChat.currentUserWechatName" placeholder="选择微信AI客服" style="width: 100%; margin-top: 10px;" @change="handleChange">
                    <el-option v-for="item in weChatList" :key="item.id" :label="item.wechatName" :value="item"></el-option>
                </el-select>
            </div>
            <div class="inpVue">
                <div class="label">请为该定时任务创建名称，方便您后续跟踪管理</div>
                <el-input v-model="taskName" placeholder="请输入任务名" style="width: 100%; margin-top: 10px;" :maxlength="16"></el-input>
            </div>
            <div class="btnVue flex_between margin30">
                <div class="btn" @click="beforeClose">取消</div>
                <div class="btn" @click="nextFun">下一步</div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { toast } from '@/common/tools';
export default {
    props: {
        dialogTableVisible: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
            weChatList: state=> state.weChatList,
        })
    },
    data(){
        return {
            taskName: "",
            taskWeChatId: "",
            taskWeChatName: "",
        }
    },
    methods: {
        beforeClose(){
            this.$store.state.taskName = ""
            this.$store.state.taskWeChatId = ""
            this.$store.state.taskWeChatName = ""
            this.$emit("beforeClose")
        },
        nextFun(){
            if(!this.taskName) return toast(1, "请输入任务名")
            this.$router.push({name: "create", query: {
                taskName: this.taskName,
                taskWeChatId: this.currentWeChat.currentWeChatId,
                taskWeChatName: this.currentWeChat.currentUserWechatName

            }})
        },
        handleChange(e){
            console.log(e)
            let obj = this.currentWeChat
            obj.currentWeChatId = e.id
            obj.currentUserWechatName = e.wechatName
            obj.currentOnLineStatus = e.status
            this.$store.state.currentWeChat = obj
            window.sessionStorage.setItem("currentWeChatId", e.id)
            window.sessionStorage.setItem("currentUserWechatName", e.wechatName)
            window.sessionStorage.setItem("currentOnLineStatus", e.status)
            this.$store.state.hasUnreadMsg = false
            this.$store.state.currentChat = {}
            this.$store.state.history = []
            this.$emit("getList")
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog) {
    width: 400px;
    height: auto;
}
:deep(.el-dialog__header) {
    padding: 20px 0;
}
:deep(.el-dialog__body) {
    padding: 0 20px 30px;
}
.inpVue {
    width: 100%;
    margin-top: 20px;
    .label {
        font-size: 12px;
    }
}
.btnVue {
    width: 100%;
    height: 40px;
    .btn {
        width: 150px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        cursor: pointer;
    }
    .btn:nth-child(1) {
        background: #f5f5f5;
    }
    .btn:nth-child(2) {
        background: #0147fd;
        color: #fff;
    }
}
</style>